<template>
	<view class="height-screen">
		<cu-custom bgColor="bg-white" isBack>
			<block slot="content">{{$t('msg.msgList')}}</block>
		</cu-custom>
		<view class="bg-white">
			<u-tabs :list="tabList" :scrollable="false" lineColor="#06C168" :activeStyle="activeStyle"
				:current="tabCurrent" @change="handleChange"></u-tabs>
		</view>
		<view class="grid gap margin-ht" style="margin-top: 20rpx;">
			<view class="bg-white flex justify-between align-center padding radius-xs" v-for="(item,index) in dataList"
				:key="index" v-if="tabCurrent==0" @tap.stop="helper.routerNav('/pages/home/msgDetail',{id:item.id})">
				<text class="one-line text-black font-bold text-df">{{item.title}}</text>
				<text class="flex-shrink margin-left">{{item.createtime | handleDateTime('YYYY-MM-DD')}}</text>
			</view>
			<view class="bg-white flex flex-direction padding radius-xs" v-for="(item,index) in dataList" :key="index"
				v-if="tabCurrent==1">
				<view class="flex justify-between align-center">
					<text class="one-line text-black font-bold text-df">{{$t('msg.orderDetail')}}</text>
					<text class="flex-shrink margin-left">{{item.createtime | handleDateTime('YYYY-MM-DD')}}</text>
				</view>
				<text class="text-gray text-sm font-400 margin-top-xs">{{item.msg}}</text>
			</view>
			<section class="empty" v-if="!dataList.length">
				<u-empty mode="list"  :text="$t('list.empty')" />
			</section>
		</view>
	</view>
</template>

<script>
	import {
		noticeLists,
		remindLists
	} from '@/apis'
	export default {
		data() {
			return {
				tabList: [{
					name: this.$t('msg.ordermsg')
				}, {
					name: this.$t('msg.ordertitle')
				}],
				activeStyle: {
					fontWeight: 'bold',
					fontSize: '30rpx',
					color: '#06C168'
				},
				dataList: [],
				page: 1,
				tabCurrent: 0,
			}
		},
		onShow() {
			this.tabCurrent = 0
			this.dataList = []
			this.page = 1
			this.noticeLists()
		},
		methods: {
			handleChange(event) {
				this.tabCurrent = event.index
				this.dataList = []
				this.page = 1
				if (this.tabCurrent == 0) {
					this.noticeLists()
				} else if (this.tabCurrent == 1) {
					this.remindLists()
				}
			},
			async noticeLists() {
				const res = await noticeLists({
					page: this.page
				})
				this.dataList = this.dataList.concat(...res.data)
			},
			async remindLists() {
				const res = await remindLists({
					page: this.page
				})
				this.dataList = this.dataList.concat(...res.data)
			}
		}
	}
</script>

<style lang="scss" scoped>
</style>